<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Products</title>

<style>
	body { font-size: 62.5%; }
	label, input { display:block; }
	input.text { margin-bottom:12px; width:120%; padding: .4em; }
	fieldset { padding:0; border:0; margin-top:25px; }
	.ui-dialog .ui-state-error { padding: .3em; }
	.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>

<link rel="StyleSheet" type="text/css"
	href="<%=request.getContextPath()%>/pages/css/common.css"></link>
<link rel="StyleSheet" type="text/css"
	href="<%=request.getContextPath()%>/pages/js/themes/base/jquery.ui.all.css"></link>
	
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/jquery-1.5.js"></script>	
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/external/jquery.bgiframe-2.1.2.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/ui/jquery.ui.core.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/ui/jquery.ui.button.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/ui/jquery.ui.position.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/ui/jquery.effects.core.js"></script>
	
	
<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		function loadData(){
			$('frm').submit();
		}
		
		function viewDetails(id){
			window.location.href = "<%=request.getContextPath()%>/viewProductDetails?productId=" + id;
		}
		
		function addToCart(){
			var productId = jQuery("#product_id").val();
			var quantity = jQuery("#quantity").val();
			var passportNo = jQuery("#passportNo").val();
			var airlineId = jQuery("#air").val();
			jQuery.ajax({
				  url: "<%=request.getContextPath()%>/addToCart?productId=" + productId + "&quantity=" + quantity + "&passportNo=" + passportNo + "&airlineId=" + airlineId,
				  success: function(data){
					  if(data == 'Not available for you airline'){
						  jQuery("#shoppingErrorMsg").html(data);
						  jQuery("#shoppingErrorMsg").show();
					  }else if(data == 'Not enough stock'){
						  jQuery("#shoppingErrorMsg").html(data);
						  jQuery("#shoppingErrorMsg").show();
					  }else{
						  jQuery( "#dialog-form" ).dialog( "close" );
						  window.location.href = "<%=request.getContextPath()%>/viewCart";
					  }
				  }
				});
		}
		
		function addToCartWithoutPopup(productId, airlineId){
			var passportNo = '0';
			var quantity = jQuery("#product_" + productId).val();
			
			jQuery.ajax({
				  url: "<%=request.getContextPath()%>/addToCart?productId=" + productId + "&quantity=" + quantity + "&passportNo=" + passportNo + "&airlineId=" + airlineId,
				  success: function(data){
					  alert(data);
					  if(data == 'Not available for you airline'){
						  jQuery("#shoppingErrorMsg").html(data);
						  jQuery("#shoppingErrorMsg").show();
					  }else if(data == 'Not enough stock'){
						  
					  }
					  else{
						  jQuery( "#dialog-form" ).dialog( "close" );
						  window.location.href = "<%=request.getContextPath()%>/viewCart";
					  }
				  }
				});
		}
		
		function openAirlinePopup(productId){
			jQuery( "#product_id" ).val(productId);
			jQuery("#quantity").val(jQuery("#product_" + productId).val());
			//alert(jQuery("#quantity").val());
			jQuery( "#dialog-form" ).dialog( "open" );
		}
		
		//Jquery popup dialog
		jQuery(function() {
			jQuery( "#dialog:ui-dialog" ).dialog( "destroy" );
			
			jQuery("#dialog-form").dialog({
				autoOpen: false,
				height: 220,
				width: 350,
				modal: true,
				position: ['center',10],
				buttons: {
					"Buy it": function() {
						addToCart();
					},
					Cancel: function() {
						jQuery( this ).dialog( "close" );
						jQuery("#shoppingErrorMsg").html('');
						jQuery("#shoppingErrorMsg").show();
					}
				},
				close: function() {
					jQuery("#shoppingErrorMsg").html('');
					jQuery("#shoppingErrorMsg").show();
				}
			});
			
			//action handler for button
			jQuery("#create-user")
			.button()
			.click(function() {
				jQuery( "#dialog-form" ).dialog( "open" );
			});
		});
		
		function getCategoryProducts(){
			getSubcategories();
			var categoryId = jQuery("#category").val();
			jQuery.ajax({
				  url: "<%=request.getContextPath()%>/getCategoryProducts?categoryId=" + categoryId,
				  success: function(data){
					document.getElementById("productsListDiv").innerHTML = data;
				  }
			});
		}
		
		function getSubCategoryProducts(){
			var subCategoryId = jQuery("#subCategory").val();
			var categoryId = jQuery("#category").val();
			jQuery.ajax({
				  url: "<%=request.getContextPath()%>/getSubCategoryProducts?subCategoryId=" + subCategoryId + "&categoryId=" + categoryId,
				  success: function(data){
					document.getElementById("productsListDiv").innerHTML = data;
				  }
			});
		}
		
		function getSubcategories(){
			var categoryId = jQuery("#category").val();
			if(categoryId == '0'){
				jQuery("#subCategoryDiv").html("");
			}else{
				jQuery.ajax({
					  url: "<%=request.getContextPath()%>/getSubCategoriesByCategory?categoryId=" + categoryId,
					  success: function(data){
						document.getElementById("subCategoryDiv").innerHTML = data;
					  }
				});
			}
		}
	</script>
</head>

<body style="background-image: none;">
	<%@ include file="common/taglibs.jsp"%>

	<div>
		<div>
			<div style="float: left; padding-right: 20px;"><label for="category" style="float: left; padding: 5px 5px 0px 0px;">Category</label><s:select list="categories" name="category" id="category" headerKey="0" headerValue="All" listKey="id" listValue="name" class="text ui-widget-content ui-corner-all" style="width: 150px;" onchange="getCategoryProducts(this)"/></div>
			<div id="subCategoryDiv"></div>
		</div>
		<br style="clear: both;"/>
		<div id="productsListDiv">
			<s:form action="product" theme="simple" id="productsfrm">
			<%@include file="_productsList.jsp" %>
			</s:form>
		</div>
	</div>
	<div id="popup">
		<div id="dialog-form" title="Add to your cart">
			<form>
				<label id="shoppingErrorMsg" style="display: none; color: red;"></label>
				<fieldset>
					<label for="name">Airline</label>
					<s:if test="%{airlines != null}">
						<s:select list="airlines" name="air" id="air" listKey="id" listValue="name" class="text ui-widget-content ui-corner-all" style="width: 250px;"/>
					</s:if>
					<div style="min-height: 20px;"></div>
					<label for="email">Passport No:</label>
					<input type="text" name="passportNo" id="passportNo" value="" class="text ui-widget-content ui-corner-all" style="width: 250px;"/>
					<input type="hidden" value="" id="quantity" name="quantity"/>
					<input type="hidden" value="" id="product_id" name="product_id"/>
				</fieldset>
			</form>
		</div>
	</div>
</body>
</html>
